import React from 'react'

import { Flex } from 'antd-mobile'

import  {withRouter}  from 'react-router-dom'

import PropTypes  from 'prop-types'

import './index.scss'

class SearchHeader extends React.Component{
    render(){
        const {className,history,curCityName}=this.props
        return (
            /* 顶部导航功能 */
            <Flex className={['search-box',className||''].join(' ')}>
            {/* 左侧白色区域 */}
            <Flex className="search">
                {/* 位置 */}
                <div className="location" onClick={()=>history.push('/citylist')}>
                    <span className="name">{curCityName}</span>
                    <i className="iconfont icon-arrow" />
                </div>

                {/* 搜索表单 */}
                <div className="form" onClick={()=>history.push('/search')}>
                    <i className="iconfont icon-seach" />
                    <span className="text">请输入小区或地址</span>
                </div>
            </Flex>
            {/* 右侧地图图标 */}
            <i className="iconfont icon-map" onClick={()=>history.push('/map')}/>
        </Flex>
        )
    }
}

SearchHeader.propTypes={
    // curCityName: PropTypes.string.isRequired,
    curCityName: PropTypes.string,
    className: PropTypes.string
}

export default withRouter(SearchHeader)
